<template>
  <ga-tabs
    v-model:activeKey="model"
    size="large"
    type="card-gutter"
    hide-content
    animation
    class="tabs_style"
    @change="(val) => $emit('tabChange', val)"
  >
    <ga-tab-pane v-for="item in list" :key="item.value" :title="item.label" />
    <slot />
  </ga-tabs>
</template>

<script setup>
import { defineModel } from "vue";
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const model = defineModel();
</script>
<style lang="scss" scoped>
// .tabs_style {
//   margin-bottom: 16px;
//   .garco-tabs-nav-tab {
//     background: transparent !important;
//   }
//   .garco-tabs-tab {
//     background: #f4f7fb;
//     padding: 0 !important;
//   }
//   .garco-tabs-tab-title {
//     padding: 5px 16px;
//     border-radius: 2px;
//     border-top: 4px solid #f4f7fb;
//   }
//   .garco-tabs-tab-active {
//     background: #fff;
//     border-top: none;
//     .garco-tabs-tab-title {
//       border-top: 4px solid #0f5ef7;
//     }
//   }
// }
</style>
